<template>
	<view class="content">
		<image class="logo" v-on:click="change" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title" @click="open">{{title}}</text>
		</view>
		
		<view class="modelclass">
			<input v-model="message" placeholder="edit me">
			<text>Message is: {{ message }}</text>
		</view>
		
		<view v-if="!raining">今天天气真好</view>
		<view v-if="raining">下雨天，只能在家呆着了</view>
		<view v-if="state ==='vue'">state的值是 Vue</view>
		<view>State is {{state?'vue':'APP'}}</view>
		<view>
			<view v-if="state ==='vue'">uni-app</view>
			<view v-else-if="state ==='html'">HTML</view>
			<view v-else>APP</view>
		</view>
		
		<view class="event-section">
			<text class="section-title">事件处理示例</text>
			<button @click="handleClick('参数1')">按钮1 - 静态参数</button>
			<button @click="handleClick(dynamicParam)">按钮2 - 动态参数</button>
			<button @click="handleClick('参数A', '参数B', $event)">按钮3 - 多参数+事件对象</button>
			<button @click="(e) => handleButton('点击事件', e)">按钮4 - 带事件对象</button>
		</view>
		
		<view class="list-section">
			<text class="section-title">列表渲染示例</text>
			
			<view v-for="item in arr" style="color: #ff0000;">
				{{item}}
			</view>

			<view v-for="(item, index) in 4" style="color: #00ff00;">
				<view :class="'list-' + index%2">{{index%2}}</view>
			</view>

			<view v-for="(value, name, index) in object">
				{{ index }}. {{ name }}: {{ value }}
			</view>

			<view v-for="item in arr" :key="item.id">
				<view style="color: #0000ff;">{{item.id}}:{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello UniAPP',
				raining: false,
				state: 'vue',
				message: '',
				dynamicParam: "我是动态参数",
				arr: [
					{id: 1, name: 'uni-app'},
					{id: 2, name: 'HTML'},
					{id: 3, name: 'Vue.js'},
					{id: 4, name: 'JavaScript'}
				],
				object: {
					title: 'How to do lists in Vue',
					author: 'Jane Doe',
					publishedAt: '2025-10-14',
					framework: 'UniApp'
				}
			}
		},
		methods: {
			change() {
				this.raining = !this.raining;
				this.state = this.state === 'vue' ? 'html' : 'vue';
			},
			open() {
				this.title = "opening a new Page";
			},
			
			handleClick(param1, param2, event) {
				console.log("参数1:", param1);
				console.log("参数2:", param2);
				console.log("事件对象:", event);
				this.title = `点击了: ${param1}`;
			},
			handleButton(msg, event) {
				console.log('接收的消息:', msg);
				console.log('事件对象:', event);
				this.state = this.state === 'vue' ? 'html' : 'app';
				this.title = `按钮消息: ${msg}`;
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: 20rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 20rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
		margin: 20rpx 0;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		padding: 10rpx 20rpx;
		background-color: #f0f0f0;
		border-radius: 10rpx;
	}
	
	.modelclass {
		width: 100%;
		margin: 20rpx 0;
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 15rpx;
	}
	
	.modelclass input {
		width: 100%;
		height: 80rpx;
		border: 1px solid #ddd;
		border-radius: 10rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #2c3e50;
		margin: 30rpx 0 15rpx;
		display: block;
		width: 100%;
		text-align: center;
	}
	
	.event-section, .list-section {
		width: 100%;
		margin: 20rpx 0;
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 15rpx;
	}
	
	button {
		margin: 10rpx 0;
		width: 100%;
		background-color: #007AFF;
		color: white;
		border: none;
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
	
	button:active {
		background-color: #0056CC;
	}
	
	.list-0, .list-1 {
		padding: 10rpx;
		margin: 5rpx;
		text-align: center;
	}
	
	.list-0 {
		background-color: #e8f4fd;
	}
	
	.list-1 {
		background-color: #fde8e8;
	}
</style>